<template>
	<view class="content">
		<view class="address" v-for="(item,i) in addrs" :key="item.id" v-if="addrs.length!=0 && item.isShow==true">
			<view class="icon">
				<u-icon name="map" color="#ff772d" size="40"></u-icon>
			</view>
			<view class="text" v-if="item.isShow==true">
				<view class="name">{{item.name}},<text>{{item.phone}}</text></view>
				<view class="addr">{{item.addr}}</view>
			</view>
			<view class="update">
				<u-button @click="goAddList()" :plain="true" :hairline="true" shape="circle">修改</u-button>
			</view>
		</view>
		<navigator open-type="navigate" url="/pages/addrlist/addrlist">
			<view class="address" v-if="addrs.length==0">
				<view class="icon">
					<u-icon name="map" color="#ff772d" size="40"></u-icon>
				</view>
				<view class="text" >
						<view>暂无地址，请选择地址！</view>
				</view>
				<view class="icon">
					<u-icon name="arrow-right" size="18"></u-icon>
				</view>
			</view>
		</navigator>
		<view class="good">
			<view class="pay">
			<view class="shop" v-for="item in payList.goodlist">
				<view class="img">
					<image :src="item.goodImg"></image>
				</view>
				<view class="text">
					<view class="val">{{item.goodName}}</view>
					<view class="type">{{item.val}} <text>x{{item.num}}</text></view>
					<view class="time">七天内发货</view>
				</view>
			</view>
			<view class="ul">
				<view class="li">
					<text>配送方式</text>
					<text>{{payList.kd}}</text>
				</view>
				<view class="li">
					<text>商品总价</text>
					<text>￥{{payList.sum}}</text>
				</view>
				<view class="li">
					<text>运费</text>
					<text>￥{{payList.yf}}</text>
				</view>
				<view class="li">
					<text>运费险</text>
					<text>￥{{payList.yfx}}</text>
				</view>
				<view class="li">
					<text>应付款</text>
					<text class="li-price">￥{{sum}}</text>
				</view>
			</view>
			<view class="ul">
				<u-line length="100%"></u-line>
				<view class="li">
					<text>下单时间：</text>
					<text>{{emptTime(payList.time)}}</text>
				</view>
				<view class="li">
					<text>备注：</text>
					<view>
						<u--input :value="payList.bz" inputAlign="right" placeholder="请输入备注..." border="none" clearable></u--input>
					</view>
				</view>
			</view>
		</view>
		</view>
		<view class="btn">
			<view class="btn1">
				共{{nums}}件商品 合计:<text>￥{{sum}}</text>
			</view>
			<view class="btn2">
				<u-button shape="circle" @click="Pay">提交订单</u-button>
			</view>
		</view>
		<popup-pay :list="{show:show,sum:sum}"></popup-pay>
	</view>
</template>

<script>
import { mapActions,mapState } from 'vuex'
	export default {
		data() {
			return {
				list:[],
				show:{
					isShow:false,//弹窗状态
				},
				nums :0,// 共多少件商品
				sum :0,// 合计多少钱
			}
		},
		onLoad() {
			console.log(this.payList);
		},
		computed:{
			...mapState('payorder',['payList']),
			...mapState('addr',['addrs']),
			Shop(){
				this.payList.goodlist.forEach((item)=>{
					this.nums += item.num;
					this.sum += item.num * item.goodPrice;
					console.log('共'+this.nums+'件商品');
					console.log('合计'+this.sum+'块');
				})
				return this.payList.goodlist;
			},
			emptTime(){
				return (res)=>{
					let year =new Date(res).getFullYear();
					let month =new Date(res).getMonth()+1;
					let date =new Date(res).getDate();
					let hours =new Date(res).getHours();
					let minutes =new Date(res).getMinutes();
					let k =`${year}-${month}-${date}-${hours}:${minutes}`;
					return k;
				}
			}
		},
		methods: {
			goAddList(){
				uni.navigateTo({
					url:'/pages/addrlist/addrlist'
				})
			},
			Pay(){
				this.show.isShow=true;
			}
		},
		mounted() {
			console.log(this.Shop);
		}
	}
</script>

<style>
.content{
	width: 100%;
	background-color: #f8f8f8;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}
.address{
	width: 96%;
	height: 80px;
	margin: 10px auto;
	border-radius: 8px;
	display: flex;
	align-items: center;
	background-color: white;
}
.address .icon{
	margin-left: 2px;
}
.address .text{
	width: 69%;
	margin-left: 10px;
}
.address .text .name text{
	color: #7d7e7f;
}
.address .text .addr{
	font-size: 14px;
	margin-top: 6px;
}
.address .update{
	width: 60px;
	height: 40px;
	display: flex;
	align-items: center;
}
.address .update .u-button{
	height: 35px;
	color: #ff772d;
	border: 1px solid #ff772d;
}
.good{
	width: 100%;
	padding-bottom: 60px;
}
.good .pay{
	width: 96%;
	margin: 15px auto;
	border-radius: 8px;
	background-color: white;
}
.pay .head{
	width: 98%;
	margin: 0 auto;
	display: flex;
	align-items: center;
}
.pay .head text{
	margin-left: 5px;
}
.pay .shop{
	width: 98%;
	margin: 10px auto;
	padding-top: 20px;
	display: flex;
	justify-content: space-between;
}
.pay .shop .img{
	width: 100px;
	height: 100px;
}
.pay .shop .img image{
	width: 100%;
	height: 100%;
	border-radius: 4px;
}
.pay .shop .text{
	width: 70%;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}
.pay .shop .text .val{
	font-size: 14px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}
.pay .shop .text .type{
	width: 90%;
	margin-top: 8px;
	font-size: 13px;
	color: #9ea0a1;
	overflow: hidden;
	text-overflow: ellipsis;
}
.pay .shop .text .type text{
	margin-left: 5px;
}
.pay .shop .text .time{
	margin-top: 8px;
	font-size: 13px;
	color: #ff5500;
	overflow: hidden;
	text-overflow: ellipsis;
}
.pay .ul{
	width: 96%;
	margin: 20px auto;
	padding-bottom: 10px;
}
.pay .ul .li{
	color: #7d7e7f;
	margin: 10px auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.pay .ul .li text:nth-child(1){
	width: 25%;
}
.pay .ul .li .li-price{
	color: #ff5500;
}
.btn{
	width: 100%;
	height: 50px;
	position: fixed;
	bottom: 0;
	display: flex;
	align-items: center;
	background-color: #fefefe;
	border-top: 1px solid #ebebeb;
}
.btn .btn1{
	width: 220px;
	margin-left: 15%;
	font-size: 15px;
}
.btn .btn1 text{
	font-size: 18px;
	color: #ff5500;
}
.btn .btn2{
	width: 100px;
	margin-left: 8px;
}
.btn .btn2 .u-button{
	height: 35px;
	line-height: 35px;
	color: white;
	background-color: #ff772d;
}
</style>
